<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>患者面板 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <!-- 使用 BootCDN（国内加速） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
</head>
<body class="bg-light">
<div id="app" class="container mt-5">
    <h2 class="text-center mb-4">患者面板</h2>
    <div class="mb-3 text-end">
        <a href="/logout" class="btn btn-secondary">注销</a>
    </div>

    <!-- 预约医生部分 -->
    <div class="card mb-4">
        <div class="card-header">预约医生</div>
        <div class="card-body">
            <!-- 选择科室 -->
            <div class="mb-3">
                <label>请选择科室</label>
                <select v-model="selectedDepartment" @change="fetchSchedulesByDepartment" class="form-select" required>
                    <option disabled value="">请选择科室</option>
                    <option v-for="dept in departments" :value="dept.id">{{ dept.name }}</option>
                </select>
            </div>
            <!-- 选择排班 -->
            <div class="mb-3" v-if="schedules.length > 0">
                <label>请选择排班</label>
                <select v-model="selectedScheduleId" class="form-select" required>
                    <option disabled value="">请选择排班</option>
                    <option v-for="sch in schedules" :value="sch.id">
                        医生：{{ sch.doctor.name }} （{{ sch.dayOfWeek }}，{{ sch.timeSlot }}）
                    </option>
                </select>
            </div>
            <div v-else class="alert alert-warning">
                该科室暂无排班，请选择其他科室
            </div>
            <button @click="bookAppointment" class="btn btn-success mt-3" :disabled="!selectedScheduleId">
                预约
            </button>
        </div>
    </div>

    <!-- 我的预约记录 -->
    <div class="card">
        <div class="card-header">我的预约记录</div>
        <div class="card-body">
            <button @click="fetchAppointments" class="btn btn-info mb-3">刷新预约记录</button>
            <ul class="list-group">
                <li class="list-group-item" v-for="app in appointments" :key="app.id">
                    <strong>预约ID:</strong> {{ app.id }},
                    <strong>医生:</strong> {{ app.doctor.name }},
                    <strong>班次:</strong> {{ app.schedule.dayOfWeek }}（{{ app.schedule.timeSlot }}）,
                    <p><strong>状态:</strong>
                        <span v-if="app.status === 'PENDING'" class="text-warning">待处理</span>
                        <span v-if="app.status === 'CONFIRMED'" class="text-info">已确认</span>
                        <span v-if="app.status === 'COMPLETED'" class="text-success">已完成</span>
                    </p>
              &nbsp;&nbsp;
              <a :href="'medical_record.html?appointmentId=' + app.id">查看诊断</a>
            </span>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            inventory: [],
            departments: [],          // 所有科室
            selectedDepartment: "",   // 当前选中的科室ID
            schedules: [],            // 当前科室下的排班记录
            selectedScheduleId: "",   // 选中的排班ID
            appointments: []          // 患者预约记录
        },
        methods: {
            fetchInventory() {
                axios.get('/patient/inventory')
                    .then(res => this.inventory = res.data)
            },
            // 获取所有科室（调用 /patient/departments 接口）
            fetchDepartments() {
                axios.get('/patient/departments')
                    .then(response => {
                        this.departments = response.data;
                    })
                    .catch(error => {
                        console.error("获取科室数据失败：", error);

                    });
            },
            // 根据选中的科室获取排班记录（调用 /patient/schedules/byDepartment 接口）
            fetchSchedulesByDepartment() {
                if (!this.selectedDepartment) {
                    this.schedules = [];
                    this.selectedScheduleId = "";
                    return;
                }
                axios.get('/patient/schedules/byDepartment', { params: { departmentId: this.selectedDepartment } })
                    .then(response => {
                        this.schedules = response.data;
                        this.selectedScheduleId = "";
                    })
                    .catch(error => {
                        console.error("获取排班数据失败：", error);
                        this.schedules = [];
                    });
            },
            // 患者预约接口，传入排班ID（调用 /patient/appointments 接口）
            bookAppointment() {
                if (!this.selectedScheduleId) {
                    alert("请选择排班");
                    return;
                }
                axios.post('/patient/appointments', null, {
                    params: { scheduleId: this.selectedScheduleId }
                })
                    .then(response => {
                        alert("预约成功");
                        this.fetchAppointments();
                    })
                    .catch(error => {
                        alert("预约失败：" + error.response.data);
                    });
            },
            // 获取当前患者预约记录（调用 /patient/appointments 接口）
            fetchAppointments() {
                axios.get('/patient/appointments')
                    .then(response => {
                        this.appointments = response.data;
                    })
                    .catch(error => {
                        console.error("获取预约记录失败：", error);
                    });
            }
        },
        mounted() {
            this.fetchDepartments();
            this.fetchAppointments();
            this.fetchInventory();
        }
    });
</script>
<div class="card mt-4">
    <div class="card-header">我的药品背包</div>
    <div class="card-body">
        <button @click="fetchInventory" class="btn btn-info mb-3">刷新背包</button>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in inventory" :key="item.id">
                {{ item.medicine.name }} x{{ item.quantity }}
                <small class="text-muted">（购买于 {{ item.createdAt }}）</small>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
